<template>
  <div>
    <y-shelf title="账户资料">
      <div slot="content">
        <div class="box-wapper">
          <div class="img-box"><img :src="editedUser.avatar" alt=""></div>
          <div class="r-box">
            <h3>修改头像</h3>
            <y-button text="更换头像" class-style="main-btn" style="margin: 0;" @btnClick="editAvatarShow=true" />
          </div>
        </div>
        <div class="box-wapper">
          <span>用户名: {{ editedUser.name }}</span>
          <span v-if="editInfo" class="align-right-box">

            <el-tooltip class="item" effect="dark" content="用户名不能修改了" placement="left-start">
              <el-input
                v-model="editedUser.name"
                size="medium"
                prefix-icon="el-icon-search"
                disabled
              />
            </el-tooltip>
          </span>
        </div>
        <div class="box-wapper">
          <span>邮箱: {{ editedUser.email }}</span>
          <span v-if="editInfo" class="align-right-box">

            <el-tooltip class="item" effect="dark" content="与原来的相同表示不变" placement="left-start">
              <el-input
                v-model="editedUser.email"
                size="medium"
                prefix-icon="el-icon-search"
                placeholder="新的邮箱"
              />
            </el-tooltip>
          </span>
        </div>
        <div class="box-wapper">
          <span>手机号: {{ editedUser.phone }}</span>
          <span v-if="editInfo" class="align-right-box">
            <el-tooltip class="item" effect="dark" content="与原来的相同表示不变" placement="left-start">
              <el-input
                v-model="editedUser.phone"
                size="medium"
                prefix-icon="el-icon-search"
                placeholder="新的手机号"
              />
            </el-tooltip>
          </span>
        </div>
        <div class="box-wapper">
          <y-button :text="editInfo | buttonNameFilter" class-style="main-btn" style="margin: 0;" @btnClick="handleEdit()" />
          <y-button v-if="editInfo" text="取消" class-style="default-btn" style="margin-left: 20px;" @btnClick="editInfo=false" />
          <span v-if="editInfo" class="align-right-box">
            <el-tooltip class="item" effect="dark" content="与原来的相同表示不变" placement="left-start">
              <el-input
                v-model="editedUser.password"
                size="medium"
                prefix-icon="el-icon-search"
                placeholder="新的密码"
              />
            </el-tooltip>
          </span>
        </div>

        <div v-if="editAvatarShow" class="edit-avatar">
          <y-shelf title="设置头像">
            <span slot="right">
              <span class="close" @click="editAvatarShow=false">
                <svg
                  t="1501234940517"
                  class="icon"
                  style=""
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3014"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="20"
                  height="20"
                ><path
                  d="M941.576 184.248l-101.824-101.824L512 410.176 184.248 82.424 82.424 184.248 410.168 512l-327.744 327.752 101.824 101.824L512 613.824l327.752 327.752 101.824-101.824L613.832 512z"
                  fill="#cdcdcd"
                  p-id="3015"
                /></svg>
              </span>
            </span>
            <div slot="content" class="content">
              <div class="edit-l">
                <div style="width: 100px;height: 100px;border: 1px solid #ccc;margin-bottom: 20px;overflow: hidden;">
                  <div
                    class="show-preview"
                    :style="{'width': previews.w + 'px','height': previews.h + 'px','overflow': 'hidden','zoom':option.zoom}"
                  >
                    <div class="preview" />
                  </div>
                </div>
                <div style="padding: 10px 0 ">头像预览</div>
                <div class="btn">
                  <a href="javascript:;">重新选择</a>
                  <input type="file" value="上传头像" @change="upimg($event)">
                </div>
                <div v-if="option.img" class="btn" @click="reset()">
                  重置
                </div>
              </div>
              <div class="edit-r">
                <div v-if="option.img" id="cropper-target" class="big">
                  <vue-cropper
                    ref="cropper"
                    :src="option.img"
                    preview=".preview"
                  />
                </div>
              </div>
              <div class="bootom-btn pa">
                <y-button
                  style="width: 140px;height: 40px;line-height: 40px"
                  text="取消"
                  @btnClick="editAvatarShow=false"
                />
                <y-button
                  style="width: 140px;height: 40px;line-height: 40px"
                  text="确定"
                  class-style="main-btn"
                  @btnClick="cropper"
                />
              </div>
            </div>
          </y-shelf>
        </div>
      </div>
    </y-shelf>
  </div>
</template>
<script>
import YButton from '@/components/YButton'
import { uploadAvatar, updateUser } from '@/api/index'
import YShelf from '@/components/shelf'
import vueCropper from 'vue-cropperjs'
import { mapState, mapMutations } from 'vuex'

import 'cropperjs/dist/cropper.css'
export default {
  components: {
    YButton,
    YShelf,
    vueCropper
  },
  filters: {
    buttonNameFilter(status) {
      return status ? '确认提交' : '修改信息'
    }
  },
  data() {
    return {
      editAvatarShow: false,
      cropContext: '',
      cropperImg: '',
      previews: {},
      option: {
        img: '',
        zoom: 0
      },
      editInfo: false,
      editedUser: {
        name: '',
        password: '',
        email: '',
        phone: ''
      }
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  created() {
    this.editedUser = this.userInfo.info
  },
  methods: {
    ...mapMutations([
      'RECORD_USERINFO'
    ]),
    handleEdit() {
      if (this.editInfo) {
        // 如果失败 要将editedUser 设置成vuex中的用户信息
        // 成功则更新 vuex中的信息
        updateUser(this.editedUser).then(res => {
          if (res.success) {
            const newInfo = this.editedUser
            console.log(newInfo)
            this.RECORD_USERINFO({ info: newInfo })
          } else {
            this.editedUser = this.userInfo.info
            if (res.data === '邮箱重复') {
              this.$message.warning('您所填的邮箱 已经在使用了,请不要重复使用')
            } else if (res.data === '电话重复') {
              this.$message.warning('您所填的电话 已经在使用了,请不要重复使用')
            }
          }
        }, err => {
          // 第一次请求 网络失败的 处理
          console.log(err)
          this.$message.error('修改信息失败')
          this.editedUser = this.userInfo.info
        })
        this.editInfo = false
      } else {
        this.editInfo = true
      }
    },
    upimg(e) {
      var file = e.target.files[0]
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      }

      if (typeof FileReader === 'function') {
        const reader = new FileReader()

        reader.onload = (event) => {
          this.option.img = event.target.result
          // rebuild cropperjs with the updated source
          this.$refs.cropper.replace(event.target.result)
        }

        reader.readAsDataURL(file)
      } else {
        this.$message.error('不支持 FileReader API, 选择失败')
      }
    },
    cropper() {
      if (this.option.img) {
        const cropperedImg = this.$refs.cropper.getCroppedCanvas().toDataURL()
        const info = this.userInfo.info
        uploadAvatar({ cropperedImg }).then(res => {
          // TODO: 上传接口还没写好
          // 还没测试这里能否走通
          if (res.success) {
            const path = res.data
            info.avatar = path
            this.RECORD_USERINFO({ info: info })
            this.$message.success('更换成功')
            this.editAvatarShow = false
          } else {
            this.$message.error(res.data)
          }
        }, err => {
          console.log(err)
          this.$message.error('提交失败,请稍后再试')
        })
      } else {
        this.$message.warning('请先选照骗')
      }
    },
    editAvatar() {
      this.editAvatarShow = true
    },

    cropImage() {
      // get image data for post processing, e.g. upload or setting image src
      this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL()
    },
    reset() {
      this.$refs.cropper.reset()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../../assets/style/mixin";

// .header {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   padding: 10px 0 5px 0;
// }

// .header h2 {
//   margin: 0;
// }

// .header a {
//   text-decoration: none;
//   color: black;
// }

// .content {
//   display: flex;
//   justify-content: space-between;
// }

// .cropper-area {
//   width: 614px;
// }

// .actions {
//   margin-top: 1rem;
// }

// .actions a {
//   display: inline-block;
//   padding: 5px 15px;
//   background: #0062CC;
//   color: white;
//   text-decoration: none;
//   border-radius: 3px;
//   margin-right: 1rem;
//   margin-bottom: 1rem;
// }

// textarea {
//   width: 100%;
//   height: 100px;
// }

// .preview-area {
//   width: 307px;
// }

// .preview-area p {
//   font-size: 1.25rem;
//   margin: 0;
//   margin-bottom: 1rem;
// }

// .preview-area p:last-of-type {
//   margin-top: 1rem;
// }

.preview {
  width: 100%;
  height: calc(372px * (9 / 16));
  overflow: hidden;
}

// .crop-placeholder {
//   width: 100%;
//   height: 200px;
//   background: #ccc;
// }

// .cropped-image img {
//   max-width: 100%;
// }

.box-wapper {
  height: 124px;
  display: flex;
  margin: 0 30px 30px;
  border-bottom: #dadada solid 1px;
  line-height: 30px;
  display: flex;
  align-items: center;
  .img-box {
    @include wh(80px);
    border-radius: 5px;
    overflow: hidden;
  }
  img {
    display: block;
    @include wh(100%)
  }
  .r-box {
    margin-left: 20px;
    h3 {
      font-size: 18px;
      font-weight: 400;
      color: #333;
    }
  }
  .align-right-box {
    position: absolute;
    right: 10%;

  }
}

// 修改头像
.edit-avatar {
  z-index: 9999;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  @include wh(100%);
  background-color: rgba(0, 0, 0, .5);
  @extend %block-center;
  .content {
    display: flex;
    padding: 45px 100px 0;
  }
  > div {
    box-sizing: content-box;
    @include wh(700px, 500px);
    margin: 0;
  }
  .btn {
    width: 80px;
    height: 30px;
    margin-left: 10px;
    position: relative;
    text-align: center;
    line-height: 30px;
    text-shadow: rgba(255, 255, 255, .496094) 0 1px 0;
    border: 1px solid #E6E6E6;
    border-radius: 10px;
    a {
      color: #666;
      display: block;
      @include wh(100%);
    }
  }

  input[type=file] {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    opacity: 0;
    width: 80px;
    height: 30px;
    cursor: pointer;
    box-sizing: border-box;
    border: 15px solid #000;
    overflow: hidden;
  }
  .edit-l {
    width: 100px;
    text-align: center;
  }
  .edit-r {
    margin-left: 20px;
    flex: 1;
    > div {
      border: 1px solid #ccc;
      width: 320px;
      height: 320px;
    }
  }
}

.image-container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}

.close {
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  padding: 0 10px;
  @extend %block-center;
  &:hover {
    svg {
      transition: all 1s;
      transform: rotate(360deg);
      transform-origin: 50% 50%;
    }
    path {
      fill: #8a8a8a;
    }
  }
}

.big {
  display: block;
  width: 320px;
  height: 320px;
}

.bootom-btn {
  padding: 0 15px;
  border-top: 1px solid #E6E6E6;
  bottom: 0;
  height: 60px;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
